<script lang="ts" setup name="AbnormalResultRanking">
import {onActivated, ref, onDeactivated} from 'vue'
import * as echarts from 'echarts/core'
import {TooltipComponent, GridComponent} from 'echarts/components'
import {EChartsOption} from 'echarts'
import {BarChart} from 'echarts/charts'
import {CanvasRenderer} from 'echarts/renderers'
import {ECharts} from 'echarts/core'

// 按需引入注册组件
echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer])

const echartRef = ref<HTMLElement>()

//echarts实例
let echartsExample: ECharts | null = null

const option: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      return `${params[0]?.name}<br>${params[0]?.marker}\t人次：${params[0]?.data}`
    }
  },
  xAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  yAxis: {
    axisLabel: {interval: 0},
    type: 'category',
    data: ['生活方式', '一般状况', '血常规', '尿常规', 'B超', '生化', '血糖', '心电图', '脏器功能', '中医体质辨识']
  },
  grid: {
    left: 180
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130, 20, 80, 130],
      type: 'bar',
      showBackground: true,
      barWidth: '60%',
      backgroundStyle: {
        color: '#F6F7FB'
      },
      itemStyle: {
        color: '#1C9399'
      }
    }
  ]
}

/**
 * @description: 重新加载大小
 * @return {*}
 */
const onReset = () => {
  if (echartsExample) {
    echartsExample?.resize()
  }
}

onActivated(() => {
  // 初始化
  if (echartRef.value) {
    echartsExample = echarts.init(echartRef.value)
    echartsExample?.setOption(option)
    echartsExample?.resize()
  }
})

onDeactivated(() => {
  // 销毁
  if (echartsExample) {
    echartsExample?.dispose()
    echartsExample = null
  }
})

defineExpose({onReset})
</script>
<template>
  <div ref="echartRef" class="echart-box" />
</template>
<style lang="less" scoped>
.echart-box {
  width: 100%;
  height: 100%;
}
</style>
